<section class="card manual">
    <div class="row">
        <div class="col-md-12">
            <filter-list request="request" callback="getList(pageIndex)"></filter-list>
        </div>
    </div>
    <table class="table table-sm table-hover" cellspacing="0">
        <thead class="thead-light">
            <tr>
                <th scope="col" width="10%">
                    Keyword
                </th>
                <th scope="col" width="20%">
                    Value
                </th>
                <th scope="col" width="20%">
                    Description
                </th>
                <th scope="col" width="5%">
                    Category
                </th>
                <th scope="col" width="5%" class="text-right">
                    Actions
                </th>
            </tr>
        </thead>

        <tbody class="sortable" ng-init="getList()">
            <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="configuration" sort-model-id="{{item.id}}">
                <td>
                    <span ng-bind="item.keyword"></span>
                </td>
                <td>
                    <module-data-preview data="item.property" width="50"></module-data-preview>
                </td>
                <td>
                    <small><span ng-bind="item.description"></span></small>
                </td>
                <td>
                    <span ng-bind="item.category"></span>
                </td>
                <td>
                    <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                        <a href="/portal/configuration/details/{{item.keyword}}" class="btn btn-light">
                            <span class="fa fa-pen text-primary"></span>
                        </a>
                        <a ng-click="remove(item.keyword);" class="btn btn-light">
                            <span class="fas fa-times text-danger"></span>
                        </a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="getList(page-1)" scroll-top="true">
</paging></section>
